<template>
    <div>
        <div style="display: flex; flex-direction: row; ">
            <el-card style="width: 150px;">
                <div>
                    <el-link class="link" @click="switchConverter('user')">
                        性别转换
                    </el-link>
                </div>
            </el-card>
            <el-card style="flex: 1; margin-left: 20px;">
                <el-tabs>
                    <el-tab-pane label="定义">
                        <p>转换器是指基础数据在插入或者查询的时候所需要经过的处理</p>
                        <p>
                            例如性别在导入模板中通常为男/女，但是在实际数据存储中使用一个数字来表示
                        </p>
                        <p>
                            setter 表示导入时对该字段的变形
                        </p>
                        <p>
                            getter表示在查询时对该字段的变形
                        </p>
                        <p>
                            如果自定义了计算流程，则转换器不会生效，需要手动进行转换
                        </p>
                    </el-tab-pane>
                    <el-tab-pane label="转换器定义">
                        <code-editor ref="editor" class="editor h-100"
                                     readonly
                                     style="height: 700px;"
                                     v-model="editorContent"
                                     language="groovy" theme="dracula"></code-editor>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
    import CodeEditor from "../code-editor";
    import SexConverter from "../../../../src/main/resources/scripts/converter/sex.groovy"

    export default {
        name: "converter",
        components: {CodeEditor},
        data() {
            return {
                editorContent: ""
            }
        },
        methods: {
            switchConverter(name) {
                if (name === "sex") {
                    this.editorContent = SexConverter
                }
            }
        },
        mounted() {
            this.switchConverter("sex")
        }
    }
</script>

<style scoped>
    .link {
        display: inline-block;
        margin-bottom: 10px;
        text-decoration: none !important;
    }
</style>
